<template >

  <div style="width:100%" >
  <div style="width:400px ;margin: 150px auto" >
    <div style="color:#f8af2f;font-size: 30px;font-weight: bold ;text-align: center;padding: 30px 0 ">
      欢迎注册
    </div>
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="username">
        <el-input prefix-icon="el-icon-user" placeholder="用户名"
                  v-model="form.username">
      </el-input>

      </el-form-item>
      <el-form-item prop="phone" >
        <el-input prefix-icon="el-icon-phone" placeholder="联系方式"
                  v-model="form.phone" ></el-input>
      </el-form-item>

      <el-form-item prop="mail" >
        <el-input prefix-icon="el-icon-mail" placeholder="邮箱"
                  v-model="form.mail" ></el-input>
      </el-form-item>

      <el-form-item prop="password" >
        <el-input prefix-icon="el-icon-user" placeholder="密码"
                  v-model="form.password" show-password></el-input>
      </el-form-item>


<!--    </el-form>-->

      <el-form-item prop="confirm" >
        <el-input prefix-icon="el-icon-user" placeholder="确认密码" v-model="form.confirm" show-password></el-input>
      </el-form-item>

      <el-form-item  label="用户权限">
        <el-radio v-model="form.age" label="1">老师</el-radio>
        <el-radio v-model="form.age" label="2">学生</el-radio>
        <el-radio v-model="form.age" label="3" @click="showError">管理员</el-radio>
      </el-form-item>
      <el-form-item >
        <el-button style="width: 100%" type="primary" @click="register">注册</el-button>
      </el-form-item>
      <el-form-item >
        <el-button style="width: 100%" type="primary" @click="back">返回登陆界面</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>


</template>

<script>
import request from "../utils/request";

export default {
  name: "Register",
  data(){
    return{
      form:{},
      rules: {
        username:[
          {required: true,message:"请输入用户名",trigger:'blur'},
        ],
        phone:[
          {required: true,message:"请输入联系方式",trigger:'blur'},
          { pattern: /^1[34578]\d{9}$/, message: "请输入合法手机号/电话号", trigger: "blur" }
        ],
        mail:[
          {required: true,message:"请输入邮箱",trigger:'blur'},
          { pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: "请输入正确的邮箱", trigger: "blur"}
        ],
        password:[
          {required: true,message:"请输入密码",trigger:'blur'},
        ],
        confirm:[
          {required: true,message:"请确认密码",trigger:'blur'},
        ],
      }
    }


  },

  methods:{
    showError(){
      this.$message({
        type:"error",
        message:"管理员只有一个！"
      })
    },
    back(){
      this.$router.push("/login")//登陆成功进行页面跳转到主页
    },
    register(){
      if (this.form.password !== this.form.confirm){
        this.$message({
          type:"error",
          message:"两次密码输入不一致"
        })
      }
     /* if (!/^1[34578]\d{9}$/.test(this.phone)) {
        this.$message({
          type:"error",
          message:"手机号格式不标准"
        })
      }*/

      else

      this.$refs['form'].validate((valid) => {
        if (valid) {
          request.post("/user/register", this.form).then(res=>{
            // this.$router.push("/")
            if (res.code==='0'){
              this.$message({
                type:"success",
                message:"注册成功"
              })
              this.$router.push("/login")//登陆成功进行页面跳转到主页
            }
            else{
              this.$message({
                type:"error",
                message:res.msg
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped></style>
